<!DOCTYPE html>
<head>
<title>ABE - Atlanta Budget Explorer</title>
<meta charset="utf-8">
<style>
path {
  stroke: white;
  stroke-width: 0.25px;
  fill: grey;
}
</style>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script src="d3.v3.min.js"></script>

<img src="header.png" style="position:absolute;top:0px;left:0px;z-index:99"/>

<script type='text/javascript' src='http://public.tableausoftware.com/javascripts/api/viz_v1.js'></script>
<div style="position:absolute;top:150px;left:250px">
<object class='tableauViz' width='350' height='437' style='display:none;'><param name='host_url' value='http%3A%2F%2Fpublic.tableausoftware.com%2F' /> <param name='site_root' value='' /><param name='name' value='Expense_Arrow&#47;Sheet1' /><param name='tabs' value='no' /><param name='toolbar' value='yes' /><param name='static_image' value='http:&#47;&#47;public.tableausoftware.com&#47;static&#47;images&#47;Ex&#47;Expense_Arrow&#47;Sheet1&#47;1.png' / > <param name='animate_transition' value='yes' /><param name='display_static_image' value='yes' /><param name='display_spinner' value='yes' /><param name='display_overlay' value='yes' /><param name='display_count' value='yes' /></object>
</div>

<div style="position:absolute;top:150px;left:600px;border:none">
<object class='tableauViz' width='350' height='437' style='display:none;'><param name='host_url' value='http%3A%2F%2Fpublic.tableausoftware.com%2F' /> <param name='site_root' value='' /><param name='name' value='Revenue_Arrow&#47;Sheet1' /><param name='tabs' value='no' /><param name='toolbar' value='yes' /><param name='static_image' value='http:&#47;&#47;public.tableausoftware.com&#47;static&#47;images&#47;Re&#47;Revenue_Arrow&#47;Sheet1&#47;1.png' / > <param name='animate_transition' value='yes' /><param name='display_static_image' value='yes' /><param name='display_spinner' value='yes' /><param name='display_overlay' value='yes' /><param name='display_count' value='yes' /></object></div><div style='width:663px;height:22px;padding:0px 10px 0px 0px;color:black;font:normal 8pt verdana,helvetica,arial,sans-serif;'>
</div>

<svg width="350" height="1000" style="position:absolute;top:25px;left:0px">
  <polygon points="0,0 0,600 250,300 0,0" style="fill:gray;stroke-width:0"/>

  <text x="5" y="185" font-family="sans-serif" font-size="16px" fill="white">Trust: $544 Mil</text>
  <polygon points="0,200 250,200 250,205 0,205 0,200" style="fill:white;stroke-width:0"/>
  <text x="5" y="300" font-family="sans-serif" font-size="16px" fill="white">Enterprise: $3,087 Mil</text>
  <polygon points="0,400 250,400 250,405 0,405 0,400" style="fill:white;stroke-width:0"/>
  <text x="5" y="430" font-family="sans-serif" font-size="16px" fill="white">Other: $415 Mil</text>
</svg>

<svg width="1000" height="120" style="position:absolute;top:50px;left:100px">
  <polygon points="675,0 510,100 840,100 675,0" style="fill:gray;stroke-width:0"/>
  <text x="600" y="85" font-family="sans-serif" font-size="40px" fill="white">Revenue</text>
  <text x="225" y="75" font-family="sans-serif" font-size="30px" fill="black">General Funds</text>
  <text x="295" y="105" font-family="sans-serif" font-size="16px" fill="black">$542 Mil</text>
</svg>


<a href='http://public.tableausoftware.com/views/Expenses_2_0/DepartmentDashboard?:embed=y&:display_count=no' >
<svg width="1000" height="300" style="position:absolute;top:505px;left:100px;border:2px">
  <polygon points="150,0 150,100 850,100 850,0 150,0" style="fill:white;stroke-width:0"/>

  <polygon points="327.5,100 160,0 495,0 327.5,100" style="fill:gray;stroke-width:0"/>
  <text x="240" y="40" font-family="sans-serif" font-size="40px" fill="white">Expenses</text>
  <text x="650" y="20" font-family="sans-serif" font-size="16px" fill="black">$542 Mil</text>
</svg>
  <img src="Details.png" style="position:absolute;left:410px;top:550px"/>
  </a>

<div style="position:absolute;top:620px;left:200px">
<img src="Share_Of_The_Burden.png" border="0" width="800px" height="650px"/>
</div>

<div style="position:absolute;top:1250px;left:200px">
<img src="Income.png" border="0" width="800px" height="650px"/>
</div>



<div style="position:absolute;top:1800px;left:275px">
<svg width="700" height="200"  style="position:absolute;top:80px;left:0px">
  <path d=" M 350 0
            L 0 200
            L 700 200
            L 350 0"
            stroke="black" stroke-width="5" fill="black" />
<text x="240" y="110" font-family="sans-serif" font-size="40px" fill="white">Where does</text>
<text x="150" y="170" font-family="sans-serif" font-size="40px" fill="white">your Property Tax go?</text>
</svg>
<script type='text/javascript' src='http://public.tableausoftware.com/javascripts/api/viz_v1.js'></script>
<div class='tableauPlaceholder' style='width: 663px; height: 437px;position:absolute;top:280px;left:40px'>
<noscript><a href='#'><img alt='House ' src='http:&#47;&#47;public.tableausoftware.com&#47;static&#47;images&#47;Ho&#47;House_0&#47;House&#47;1_rss.png' style='border: none' /></a></noscript><object class='tableauViz' width='663' height='437' style='display:none;'><param name='host_url' value='http%3A%2F%2Fpublic.tableausoftware.com%2F' /> <param name='site_root' value='' /><param name='name' value='House_0&#47;House' /><param name='tabs' value='no' /><param name='toolbar' value='yes' /><param name='static_image' value='http:&#47;&#47;public.tableausoftware.com&#47;static&#47;images&#47;Ho&#47;House_0&#47;House&#47;1.png' / > <param name='animate_transition' value='yes' /><param name='display_static_image' value='yes' /><param name='display_spinner' value='yes' /><param name='display_overlay' value='yes' /><param name='display_count' value='yes' /></object></div><div style='width:663px;height:22px;padding:0px 10px 0px 0px;color:black;font:normal 8pt verdana,helvetica,arial,sans-serif;'>

<svg width="900" height="500" style="position:absolute;top:300px;left:0px">
<text id="t1" x="80" y="110" font-family="sans-serif" font-size="20px" fill="white">49%</text>
<text id="t2" x="350" y="110" font-family="sans-serif" font-size="20px" fill="white">20%</text>
<text id="t3" x="500" y="110" font-family="sans-serif" font-size="20px" fill="white">19%</text>
<text id="t4" x="450" y="370" font-family="sans-serif" font-size="20px" fill="white">8%</text>
<text id="t5" x="550" y="370" font-family="sans-serif" font-size="20px" fill="white">3%</text>
<polygon points="0,350 0,450 840,450 840,350 0,350" style="fill:white;stroke-width:0"/>
</svg>
</div>


<script>
Number.prototype.formatMoney = function(c, d, t){
var n = this, 
    c = isNaN(c = Math.abs(c)) ? 2 : c, 
    d = d == undefined ? "." : d, 
    t = t == undefined ? "," : t, 
    s = n < 0 ? "-" : "", 
    i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "", 
    j = (j = i.length) > 3 ? j % 3 : 0;
   return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
 };

function calculate(){
	HomeValue = document.getElementById('HomeValue').value;
	HomeValue = HomeValue.replace(",","");
	HomeValue = HomeValue.replace("$","");
	Assessment = HomeValue * .4;
	document.getElementById('t_assessment').innerHTML = Assessment.formatMoney(0);
	
	a_fb = Assessment - 0;
	a_fo = Assessment - 51946;
	a_s = Assessment - 2000;
	a_ab = Assessment;
	a_ag = Assessment - 30000;
	a_ap = Assessment - 30000;
	a_asb= Assessment;
	a_as = Assessment - 30000;
	document.getElementById('a_fb').innerHTML = a_fb.formatMoney(0);
	document.getElementById('a_fo').innerHTML = a_fo.formatMoney(0);
	document.getElementById('a_s').innerHTML  = a_s.formatMoney(0);
	document.getElementById('a_ab').innerHTML = a_ab.formatMoney(0);
	document.getElementById('a_ag').innerHTML = a_ag.formatMoney(0);
	document.getElementById('a_ap').innerHTML = a_ap.formatMoney(0);
	document.getElementById('a_asb').innerHTML= a_asb.formatMoney(0);
	document.getElementById('a_as').innerHTML = a_as.formatMoney(0);

	t_fb = a_fb * 0.00027;
	t_fo = a_fo * 0.010211;
	t_s  = a_s * 0.00015;
	t_ab = a_ab * 0.0012;
	t_ag = a_ag * 0.01005;
	t_ap = a_ap * 0.0005;
	t_asb= a_asb * 0.0001;
	t_as = a_as * 0.02164;
	document.getElementById('t_fb').innerHTML = t_fb.formatMoney(0);
	document.getElementById('t_fo').innerHTML = t_fo.formatMoney(0);
	document.getElementById('t_s').innerHTML  = t_s.formatMoney(0);
	document.getElementById('t_ab').innerHTML = t_ab.formatMoney(0);
	document.getElementById('t_ag').innerHTML = t_ag.formatMoney(0);
	document.getElementById('t_ap').innerHTML = t_ap.formatMoney(0);
	document.getElementById('t_asb').innerHTML= t_asb.formatMoney(0);
	document.getElementById('t_as').innerHTML = t_as.formatMoney(0);

	t_cs = t_fb + t_fo + t_s;
	t_atl = t_ab + t_ag + t_ap + t_asb + t_as;
	document.getElementById('t_cs').innerHTML = t_cs.formatMoney(0);
	document.getElementById('t_atl').innerHTML = t_atl.formatMoney(0);
}
</script>

<div style="position:absolute;top:1000px;left:100px">
<h2>Enter your Property Market Value and Click Calculate</h2>
<table>
	<tr>
		<td><b>Market Value</b></td>
		<td><input type="text" width="100px" id="HomeValue"></td>
		<td>Assessment:</td>
		<td id="t_assessment"></td>
		<td><input type="button" value="Calculate" onclick="calculate()"/></td>
	</tr>
</table>
<table>
	<tr>
		<td>Category</td>
		<td>Exemptions</td>
		<td>Net Assessment</td>
		<td align="right">Millage Rate</td>
		<td align="right"><b>Tax</b></td>
	</tr>
	<tr>
		<td>Fulton Bonds</td>
		<td align="right">$0</td>
		<td align="right" id="a_fb"></td>
		<td align="right">0.00027<td>
		<td align="right" id="t_fb"></td>
	</tr>
	<tr>
		<td>Fulton Operations</td>
		<td align="right">$51,946</td>
		<td align="right" id="a_fo"></td>
		<td align="right">0.010211<td>
		<td align="right" id="t_fo"></td>
	</tr>
	<tr>
		<td>State</td>
		<td align="right">$2,000</td>
		<td align="right" id="a_s"></td>
		<td align="right">0.00015<td>
		<td align="right" id="t_s"></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td><b>County/State</b></td>
		<td align="right" id="t_cs"></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td>Atlanta Bonds</td>
		<td align="right">$0</td>
		<td align="right" id="a_ab"></td>
		<td align="right">0.0012<td>
		<td align="right" id="t_ab"></td>
	</tr>
	<tr>
		<td>Atlanta General</td>
		<td align="right">$30,000</td>
		<td align="right" id="a_ag"></td>
		<td align="right">0.01005<td>
		<td align="right" id="t_ag"></td>
	</tr>
	<tr>
		<td>Atlanta Parks</td>
		<td align="right">$30,000</td>
		<td align="right" id="a_ap"></td>
		<td align="right">0.0005<td>
		<td align="right" id="t_ap"></td>
	</tr>
	<tr>
		<td>Atlanta School Bond</td>
		<td align="right">$0</td>
		<td align="right" id="a_asb"></td>
		<td align="right">0.0001<td>
		<td align="right" id="t_asb"></td>
	</tr>
	<tr>
		<td>Atlanta School</td>
		<td align="right">$30,000</td>
		<td align="right" id="a_as"></td>
		<td align="right">0.02164<td>
		<td align="right" id="t_as"></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
		<td><b>City of Atlanta</b></td>
		<td align="right" id="t_atl"></td>
	</tr>
</table>
</div>


</body>


